In WPF, resize a circle inside a rectangle

I am trying to recreate the Lollipop Android button touch feedback style.

In WPF, we have a rectangle with a background color of blue. What I want is when the rectangle is clicked on or touched, a circle animates from the center of the rectangle to indicate a touch event has happened to the user.

We have a storyboard to just do a simple color change on "hit", but how would I make my desired effect with a circle that radiates from the center of the rectangle.

Our current simple storyboard and XAML is below.

<UserControl.Resources>
    <Storyboard x:Key="hit">
        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="bg">
            <EasingColorKeyFrame KeyTime="0:0:0.3" Value="#FFB92929"/>
        </ColorAnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard x:Key="off">
        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="bg">
            <EasingColorKeyFrame KeyTime="0:0:0.5" Value="#FF2980B9"/>
        </ColorAnimationUsingKeyFrames>
    </Storyboard>
</UserControl.Resources>
<UserControl.Triggers>
    <EventTrigger RoutedEvent="UIElement.MouseLeftButtonDown">
        <BeginStoryboard Storyboard="{StaticResource hit}"/>
    </EventTrigger>
    <EventTrigger RoutedEvent="UIElement.MouseLeftButtonUp">
        <BeginStoryboard x:Name="off_BeginStoryboard" Storyboard="{StaticResource off}"/>
    </EventTrigger>
    <EventTrigger RoutedEvent="Mouse.MouseLeave">
        <BeginStoryboard x:Name="off_BeginStoryboard1" Storyboard="{StaticResource off}"/>
    </EventTrigger>
</UserControl.Triggers>

<Grid x:Name="LayoutRoot" Style="{StaticResource GlobalStyles}">
    <Rectangle x:Name="bg" Style="{StaticResource btnSquare}"/>
    <TextBlock x:Name="btnText" HorizontalAlignment="Center" TextWrapping="Wrap" Text="-" VerticalAlignment="Center" Foreground="White" FontSize="64" FontWeight="Bold"/>
    <Rectangle x:Name="hit" Fill="#FF2980B9" Stroke="Black" Opacity="0" d:IsHidden="True"/>
    <!--Probably need an ellipses to position over Rectangle to create animated growing circle effect.-->
</Grid>